<template>
  <div class="detailMain">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button type="primary" @click="hander(1)"><a-icon type="audit" />审核</a-button>
          <a-button type="primary" @click="hander(2)"><a-icon type="info-circle" />拒绝</a-button>
          <a-button type="primary"><a-icon type="rollback" />返回</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="基本信息" key="1">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>流水号：{{detailData.order_no}}</p>
          </a-col>
          <a-col :span="8">
            <p>提现金额（元）：{{detailData.amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>手续费（元）：{{detailData.fee}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>到账金额（元）：{{detailData.actual_amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>发起时间：{{detailData.created_at}}</p>
          </a-col>
          <a-col :span="8">
            <p>处理时间：{{detailData.processed_at}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>审核状态：{{reviewStatus}}</p>
            <!-- 提现状态 0审核中1成功2失败 -->
          </a-col>
          <a-col :span="8">
            <p>操作人：{{detailData.admin}}</p>
          </a-col>
          <a-col :span="8">
            <p>备注：{{detailData.remark}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="服务商信息" key="2">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>服务商编号：{{detailData.partner_no}}</p>
          </a-col>
          <a-col :span="8">
            <p>服务商姓名：{{detailData.partner_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>服务商手机号：{{detailData.phone}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>省份：{{detailData.province}}</p>
          </a-col>
          <a-col :span="8">
            <p>城市：{{detailData.city}}</p>
          </a-col>
          <a-col :span="8">
            <p>区/县：{{detailData.district}}</p>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <p>发起人编号:{{detailData.user}}</p>
          </a-col>
          <a-col :span="8">
            <p>发起人姓名:{{detailData.user_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>发起人手机号：{{detailData.user_phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <div class="modal-wrap">
      <a-modal
        :title="auditTitle==1?'通过审核':'拒绝审核'"
        v-model="visible"
        @ok="handleAuditOk"
        :maskClosable="maskClosable"
        okText="确认"
        cancelText="取消"
        class="audit-pop"
      >
        <p>请确认是否{{auditTitle==1?'通过审核':'拒绝审核'}}</p>
        <a-textarea placeholder="请输入备注信息" :rows="4" v-model="remarkTxt"/>
      </a-modal>
      <remarks
        :title="auditTitle==1?'通过审核':'拒绝审核'"
        :hint="`请确认是否${auditTitle==1?'通过审核':'拒绝审核'}?`"
        ref="remarks"
        :isRefuse="auditTitle"
        @remarksConfirm="handleAuditOk"
      />
    </div>
  </div>
</template>

<script>
import {
  getPtdewithdrawDetail,
  updatePtdewithdraw
} from '../../store/providerApi.js'
import { mixin } from '../../utils/remaksMixin'
export default {
  name: 'cashWithdrawalDetail',
  mixins: [mixin],
  data() {
    return {
      detailData: {},
      activeKey: ['1', '2', '3'],
      visible: false,
      maskClosable: false,
      remarkTxt: '',
      auditTitle: 0
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    reviewStatus() {
      if (Number(this.detailData.status) === 0) {
        return '未审核'
      }
      if (Number(this.detailData.status) === 1) {
        return '已审核'
      }
      if (Number(this.detailData.status) === 2) {
        return '已拒绝'
      }
    },
    reviewBankType() {
      // <!-- 账户类型 1对公2对私 -->
      if (Number(this.detailData.bank_type) === 1) {
        return '对公'
      }
      if (Number(this.detailData.bank_type) === 2) {
        return '对私'
      }
    }
  },
  methods: {
    getData() {
      getPtdewithdrawDetail({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data
      })
    },
    hander(status) {
      if (Number(this.detailData.status) === 0) {
        this.auditTitle = status
        this.openRemaks()
      } else {
        this.$message.warning('该记录已审核，无法重复操作！')
      }
    },
    backList() {
      this.$router.go(-1)
    },
    handleAuditOk({ remarks }) {
      var data = {
        status: this.auditTitle,
        id: this.detailData.uuid
      }
      if (remarks) {
        data.memo = remarks
      }
      /* eslint-disable */
      updatePtdewithdraw(data).then(e => {
        this.$message.success(e.data.message)
        this.backList()
      })
    }
  }
}
</script>

<style>
</style>
